<template>
	<view>
		<!-- 顶部区域 -->
		<view class="top-icons">
			<view class="top-icons-left">
				<navigator url="" class="top-icons-left-love" style="background-color: rgba(255,0, 0,0.1);">
					<image src="../../static/爱心.png" mode="" class="top-icons-left-love-Image"></image>
				</navigator>
				<text>赞和收藏</text>
			</view>
			<view class="top-icons-center">
				<navigator url="" class="top-icons-center-add" style="background-color: rgba(0,0,255,0.1);">
					<image src="../../static/新增关注.png" mode="" class="top-icons-center-add-Image"></image>
				</navigator>
				<text>新增关注</text>
			</view>
			<view class="top-icons-right">
				<navigator url="" class="top-icons-right-comment" style="background-color: rgba(0,255,0,0.1);">
					<image src="../../static/评论.png" mode="" class="top-icons-right-comment-Image"></image>
				</navigator>
				<text>评论和@</text>
			</view>
		</view>

		<!-- 消息区域 -->
		<view class="message">
			<view class="message-box" v-for="(item,index) in message" :key="index"
				@click.stop="gotoMessage(item.userId)">


				<view class="message-left">
					<image :src="item.userAvatar" mode=" aspectFill" class="message-left-Image"></image>
				</view>
				<view class="message-title">
					<text class="message-title-top">{{item.userName}}</text>
					<text class="message-title-down">{{item.content}}</text>
				</view>
				<view class="message-date">
					<text class="message-date-text">{{item.createdTime}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId: 1,
				message: []
			};
		},
		onLoad() {
			this.getLatestMessage(this.userId)

		},
		methods: {
			formaterDate(dateTime) {
				let date = new Date(dateTime);
				return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
			},
			gotoMessage(receiveId) {
				uni.navigateTo({
					url: '/subpkg/message/message?userId=' + this.userId + '&receiveId=' + receiveId
				})
			},
			async getLatestMessage(userId) {
				const _this = this;

				const {
					data: res
				} = await uni.$http.post('http://localhost:8080/user/letter/latestMessage', {
					userId: userId,
					page: 1,
					size: 20
				})
				if (res.code !== 200) return uni.$ShowMsg();
				//为数据赋值：通过展开运算符的形式，进行新旧数据的拼接
				_this.message = res.data.map(item => {
					// 格式化时间戳
					item.createdTime = _this.formaterDate(item.createdTime);
					return item;
				})
			}
		}
	}
</script>

<style lang="scss">
	.top-icons {
		display: flex;
		height: 200rpx;

		.top-icons-left,
		.top-icons-center,
		.top-icons-right {
			width: 33.3%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;


			.top-icons-left-love,
			.top-icons-center-add,
			.top-icons-right-comment {
				width: 100rpx;
				height: 100rpx;
				border-radius: 30%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 20rpx;


				.top-icons-left-love-Image,
				.top-icons-center-add-Image,
				.top-icons-right-comment-Image {
					width: 60rpx;
					height: 60rpx;

				}
			}
		}
	}

	.message {
		width: 750rpx;

		.message-box {
			width: 750rpx;
			height: 100rpx;
			display: flex;
			margin: 20rpx 0;

			.message-left {
				display: flex;
				width: 15%;
				align-items: center;
				justify-content: center;

				.message-left-Image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
			}

			.message-title {
				width: 68%;
				display: flex;
				flex-direction: column;

				.message-title-top {
					font-size: 30rpx;
					margin: 10rpx 0 6rpx 8rpx;
				}

				.message-title-down {
					font-size: 26rpx;
					color: #c0c0c0;
					margin-left: 8rpx;
				}
			}

			.message-date {



				.message-date-text {
					font-size: 22rpx;
					color: #c0c0c0;
				}
			}
		}
	}
</style>